<template>
	<view>
		<view class="login">
			<u-toast ref="uToast"></u-toast>
			<view class="form">
				<view class="title">
					<text>易售校园二手平台</text>
				</view>
				<u--form labelPosition="left" :model="model" :rules="rules" ref="loginForm">
					<u-form-item prop="loginForm.username" leftIcon="account-fill" borderBottom ref="item1">
						<view class="item">
							<u--input v-model="model.loginForm.username" border="none" placeholder="用户名"></u--input>
						</view>
					</u-form-item>
					<u-form-item prop="loginForm.password" leftIcon="lock-fill" borderBottom ref="item1">
						<view class="item">
							<u--input v-model="model.loginForm.password" password border="none"
								placeholder="密码"></u--input>
						</view>
					</u-form-item>
					<u-form-item prop="loginForm.code" leftIcon="integral-fill" borderBottom ref="item1">
						<view class="item">
							<u-input v-model="model.loginForm.code" clearable border="none" placeholder="验证码"></u-input>
							<img :src="codeUrl" @click="getCode" class="login-code-img" />
						</view>
					</u-form-item>
				</u--form>
				<view style="margin-top: 20rpx;">
					<!-- 登录按钮 -->
					<u-button type="primary" class="login-button" @click="login()">登 录</u-button>
					<!-- 没有账号，去注册的链接 -->
					<view style="margin-top: 20rpx; text-align: center;">
						<a @click="toRegister()" style="text-decoration: underline; color: #1c84c6;">没有账号，去注册</a>
					</view>
				</view>

			</view>
		</view>
		<view class="web-footer">
			<div>Copyright © 2024 HelloDam All Rights Reserved. </div>
			<a href="https://beian.miit.gov.cn/" target="_blank" style="color: #1c84c6">粤ICP备2024309875号-1</a>
		</view>
	</view>
</template>

<script>
	import {
		getCodeImg,
		login
	} from "@/api/login";
	import {
		getUserProfileVo
	} from "@/api/user";

	export default {
		data() {
			return {
				model: {
					loginForm: {
						username: '',
						password: '',
						uuid: '',
						code: '',
					},
				},
				// 登录表单字段校验过程
				rules: {
					'loginForm.username': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change']
					},
					'loginForm.password': {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
					'loginForm.code': {
						type: 'number',
						required: true,
						message: '请输入数字类型的验证码',
						trigger: ['blur', 'change']
					},
				},
				codeUrl: "",
			}
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.loginForm.setRules(this.rules)
		},
		created() {
			let token = uni.getStorageSync('token')
			if (token) {
				this.toIndex();
			} else {
				this.getCode();
			}
			console.log("设置账户名和密码");
			console.log("用户名：" + uni.getStorageSync('username'));
			this.model.loginForm.username = uni.getStorageSync('username');
			this.model.loginForm.password = uni.getStorageSync('password');
		},
		methods: {
			/**
			 * 获取验证码
			 */
			getCode() {
				// console.log("获取验证码")
				getCodeImg().then(res => {
					// console.log("获取验证码：" + JSON.stringify(res))
					let captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
					if (captchaEnabled) {
						this.codeUrl = "data:image/gif;base64," + res.img;
						this.model.loginForm.uuid = res.uuid;
					}
				});
			},
			login() {
				this.$refs.loginForm.validate().then(res => {
					// console.log("登录：");
					login(this.model.loginForm.username, this.model.loginForm.password, this.model.loginForm.code,
						this.model
						.loginForm.uuid).then(
						res => {
							// console.log("登录：" + JSON.stringify(res))
							// 存储token
							uni.setStorage({
								key: "token",
								data: res.token,
								success: (res) => {
									// 存储用户名
									getUserProfileVo().then(res => {
										// console.log("getUserProfileVo:" + JSON.stringify(res.data.userName));
										uni.setStorageSync("curUser", res.data)
										// username = res.data.userName;

									})
									this.toIndex();
								}
							})

						}).catch(res => {
						this.$refs.uToast.show({
							type: 'error',
							message: res.msg
						})
					})
				}).catch(errors => {
					this.$refs.uToast.show({
						type: 'error',
						message: "表单数据校验失败，请检查后再登录"
					})
				})

			},
			toIndex() {
				// 跳转到首页
				uni.reLaunch({
					url: "/pages/index/index"
				})
			},
			toRegister() {
				// 跳转到注册页面
				uni.reLaunch({
					url: "/pages/register/register"
				})
			}
		}
	}
</script>

<style lang="scss">
	.web-footer {
		height: 40px;
		line-height: 20px;
		position: fixed;
		bottom: 0;
		width: 100%;
		text-align: center;
		color: #0e0000;
		font-family: Arial;
		font-size: 12px;
		letter-spacing: 1px;
		background: #FFFFFF;
	}

	.login {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
		// background: #2b92ff;
		background-color: #0093E9;
		background-image: linear-gradient(135deg, #0093E9 0%, #80D0C7 100%);

		.title {
			width: 100%;
			font-weight: bold;
			font-size: 45rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 30rpx;
		}

		.form {
			width: 600rpx;
			background: #ffffff;
			padding: 30rpx;
			border-radius: 20rpx;

			.item {
				display: flex;
				height: 80rpx;
			}

			.login-code-img {
				float: right;
				height: 80rpx;
				width: 160rpx;
				padding-left: 12rpx;
			}

			.login-button {
				margin-top: 50rpx;
				width: 80%;
			}
		}


	}
</style>